<template>
  <div class="BIG">
    <div class="bigbofangTop">
       <div class="LEFT">
        <img src="../image/cizhen.png" alt="" class="img66" :class="{img66_active:!isbtnShow}"/>
        <img :src="musicList.al.picUrl" alt="" class="img666" :class="{img666_active:!isbtnShow ,img666_paused:isbtnShow}"/>
        <img src="../image/cipan.png" alt="" class="img6666" />
       </div>
       <div class="midden">
       <p class="NAME">{{(musicList.al.name)}}</p>
        <p v-for="item in musicList.ar" :key="item" class="NAME1">
        {{item.name}}
        </p>
        <div class="LyricList" ref="musicLyric">
          <p v-for="item in lyric" :key="item" class="LyricListp" :class="{LyricListp_active :(currentTime*1000>item.time && currentTime*1000<item.pre)}">
          {{item.lrc}}
          </p>
        </div>
       </div>

       <div class="RIGHT">
        <img src="../image/xiala.png" alt="" class="tubiao8" @click="updateDetailShow" />
       </div>
  </div>
  <div class="BIGBottom">
    <div class="jindu">
     <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
    </div>
  <div class="Bottom">
    <img src="../image/shangyiqu.png" alt="" @click="goPlay(-1)">
    <img src="../image/bofang.png" alt=""  v-if="isbtnShow"   @click="play">
    <img src="../image/zanting.png" alt="" v-else="isbtnShow" @click="play">
    <img src="../image/xiayiqu.png" alt="" @click="goPlay(1)">
  </div>
</div>

  </div>
</template>
<script>
import { invertBy } from 'lodash';
import { mapMutations, mapState } from 'vuex';

export default{
computed:{
  ...mapState(["LyricList",'currentTime','playListIndex','playList',"duration"]),
  lyric:function(){
    let arr;
    if(this.LyricList.lyric){
      arr=this.LyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
        let min=item.slice(1,3);
        let sec=item.slice(4,6);
        let mill=item.slice(7,10);
        let lrc=item.slice(11,item.length)
        let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
        if(isNaN(Number(mill))){
          mill=item.slice(7,9);
          lrc=item.slice(10,item.length)
          time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
        }
        return{min,sec,mill,lrc,time}
      })
      arr.forEach((item,i)=>{
        if(i===arr.length-1 || isNaN(arr[i+1].time)){
          item.pre=10000;
        }else{
          item.pre=arr[i+1].time
        }
      });
    }
    console.log(arr);
    return arr
  }

},
  mounted(){
    // console.log(this.musicList);
    this.addDuration()
  },
  props:['musicList','isbtnShow','play',"addDuration"],
  methods:{
    goPlay:function(num){
       let index=this.playListIndex+num
       if(index<0){
        index=this.playList.length-1
       }else if(index==this.playList.length){
        index=0
       }
       this.updatePlayListIndex(index)
  },
    ...mapMutations(["updateDetailShow",'updatePlayListIndex'])
  },
  goPlay:function(num){
       let index=this.playListIndex+num
       if(index<0){
        index=this.playList.length-1
       }else if(index==this.playList.length){
        index=0
       }
       this.updatePlayListIndex(index)
  },
  watch:{
    currentTime:function(newValue){
      let p=document.querySelector("p.LyricListp_active ")
      console.log([p]);
      if(p){
      if(p&&p.offsetTop>300){
        this.$refs.musicLyric.scrollTop=p.offsetTop-300
      }
    }
    if(newValue===this.duration){
     if (this.updatePlayListIndex===this.playList.length-1){
        this.updatePlayListIndex(0);
      }else{
      this.updatePlayListIndex(this.playListIndex+1);
      }
    }
    },
  },
}  
</script>
<style>
.BIG{
  width: 100%;
  height: 100%;
  background-image: url(../image/beijing1.jpg);
}
.bigbofangTop{
  width: 100%;
  height: 80%;
  display: flex;
 justify-content: flex-start;
}
.BIGBottom{
  display: flex;
  flex-direction: column;
  height: 10%;
}
.jindu{
  height: 20%;
  margin-left: 27%;
}
.range{
  width: 65%; 
  margin: 0;

}
.Bottom{
  height: 80%;
  display: flex;
  justify-content: space-around;
  margin-top: 3%;
}
.LEFT{
  width: 30%;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.midden{
width:65%;

}
.RIGHT{
  width: 5%;
}
.tubiao8{
  margin-right: auto;
  margin-top: 1%;
  width: 60%;
}
.img66{
  margin-top: 22%;
  width: 140px;
  height: 230px;
  position: absolute;
  left: 45%;
  transform-origin: 0 0;
  transform: rotate(-22deg);
  transition: all 3s;
  z-index: 2;
}
.img66_active{
  margin-top: 26%;
  width: 140px;
  height: 230px;
  position: absolute;
  left: 45%;
  transform-origin: 0 0;
  transform: rotate(0deg);
  transition: all 3s;
  z-index: 2;
}

.img666{
  border-radius: 100%;
  position: absolute;
  width: 230px;
  height: 230px;
margin-top: 60%;
animation:rotate_ar 10s linear infinite;
}
.img666_active{
 animation-play-state: running;
}
.img666_paused{
  animation-play-state: paused;
}
@keyframes rotate_ar{
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
.img6666{
   width: 280px;
   height: 280px;
   position: absolute;
   margin-top: 52%;
   z-index: 1;
}
.NAME{
  color: rgb(223, 165, 30);
  font-size: 40px;
  text-align: center;

  /* margin-right: 42%; */
}
.NAME1{
  color: rgba(219, 185, 75, 0.492);
  font-size: 20px;
  text-align: center;
  /* margin-right: 42%; */
}
.LyricList{
  margin-top: 3%;
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow:scroll ;
   scroll-behavior: smooth;
}
.LyricList::-webkit-scrollbar{
  display: none;
}
.LyricListp{
  transition: 1s;
color: rgb(5, 5, 5);
margin-bottom: 1%;
/* margin-right: 42%; */
}
.LyricListp_active{
  color: rgba(233, 223, 40, 0.966);
  font-size: 30px;
}
</style>
     